<template>
  <view class="bg-grey pad20">
    <sb-back-icon></sb-back-icon>
    <u-cell-group class="address-info">
      <u-cell-item border="false" @click="goAddress" :arrow="info.state === 1">
        <view class="flex">
          <view class="">
            {{ orderInfo.receiver }}
          </view>
          <view class="flex marh20">
            <view class="">
              {{ orderInfo.tel }}
            </view>
          </view>
        </view>
        <view class="flex">
          <view class="font30">
            {{ orderInfo.address }}
          </view>
        </view>
      </u-cell-item>
    </u-cell-group>
    <view
      class="flex bg bg-white pad20 j-s"
      v-for="item in orderInfo.orderGoods"
    >
      <view class="flex marv10">
        <u-image
          :src="item.sku.goods.cover"
          width="150rpx"
          height="150rpx"
          border-radius="10rpx"
        />
        <view class="mar15" style="width: 180px">
          <view class="u-line-2">
            {{ item.sku.goods.name }}
          </view>
          <view class="c-d">
            {{ item.sku.skuSpec[0] }}
          </view>
        </view>
      </view>
      <view class="marv20">
        <view class="marv15">
          {{ item.sku.salePrice }}
        </view>
        <view class="c-d" style="margin: 18px 0 0 30px"> *1 </view>
      </view>
    </view>
    <view>
      <u-cell-group>
        <u-cell-item title="运费" :arrow="false" value="包邮"></u-cell-item>
        <!-- <u-cell-item title="优惠卷" :arrow="true" value="无可用"></u-cell-item> -->
      </u-cell-group>
    </view>
    <view>
      <u-cell-group>
        <u-cell-item title="skuId" :arrow="false" :value="id"></u-cell-item>
      </u-cell-group>
    </view>
    <view>
      <u-cell-group>
        <u-cell-item title="备注" :arrow="false" :value="id"></u-cell-item>
      </u-cell-group>
    </view>

    <input type="text" value="" />

    <template v-if="unPayed">
      <view class="footer bg-white pad10 padv20 flex j-s">
        <view class="flex">
          <view class="flex flex-col j-c"> 共一件合计 </view>
          <view class="flex flex-col j-c" style="color: orangered">
            ￥1999
          </view>
        </view>
        <view class="pay padh20 padv10" @click="pay"> 去付款 </view>
      </view>
    </template>
  </view>
</template>

<script>
import { OrderState } from "../../../core/constant.js";
export default {
  computed: {
    unPayed() {
      return this.info.state === OrderState.WFK;
    },
  },
  onLoad({ id }) {
    this.id = id;
    this.getOrderDetail();
  },
  data() {
    return {
      info: {
        state: 1,
      },
      orderInfo: {},
      id: "",
      cata_id: 0,
      res: "",
    };
  },
  methods: {
    goAddress() {
      this.$go2("/pages/main/tabbar/mine/adress/list?fromOrder=1");
    },
    async pay() {
      let { success, data } = await this.$postB("/order/add", {
        remark: this.orderInfo.remark,
        originalPrice: this.orderInfo.originalPrice,
        receiver: this.orderInfo.receiver,
        tel: this.orderInfo.tel,
        address: this.orderInfo.address,
        skus: [
          {
            skuId: 1,
            count: 3,
          },
          {
            skuId: 2,
            count: 2,
          },
        ],
      });
    },
    async getOrderDetail() {
      let { success, data } = await this.$get("/order/detail", {
        id: this.id,
      });
      if (success) this.orderInfo = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.address-info {
  background: white;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 700rpx;

  .pay {
    background: orangered;
    border-radius: 40rpx;
    color: #fff;
  }
}
</style>
